<template>
  <div id="home">
    <home-head />
    <div class="wrap2">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="banner in banners" :key="banner.id">
            <img :src="banner.picUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
        <!-- /轮播 -->
        <!-- 宫格导航 -->
        <van-grid clickable :column-num="3">
          <van-grid-item
            v-for="cate in cates"
            :key="cate.id"
            :icon="cate.icon"
            @click="enterList(cate.id)"
            :text="cate.name"
          />
        </van-grid>
        <!-- /宫格导航 -->
        <!-- 推荐 -->
        <van-list
          v-model="loading"
          :offset="50"
          :finished="finished"
          finished-text="哦豁，没有咯"
          @load="onLoad"
        >
          <flower :items="items" @clickCart="addCart" @clickItem="enterDetail" />
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- /推荐 -->
    <common-tab />
  </div>
</template>

<script>
import commonTab from '../../components/commonTab'
import { fetchCates, fetchHomeBanner, fetchItems, addCart } from 'api'
import HomeHead from './components/HomeHead.vue'
import Flower from './components/Flower.vue'
import { isLogin, getToken } from 'utils'
import { Toast } from 'vant'
export default {
  name: 'home',
  data () {
    return {
      cates: [],
      banners: [],
      items: [],
      isLoading: false,
      page: 1,
      pageSize: 4,
      loading: false,
      finished: false
    }
  },
  created () {
    this.fetchCates()
    this.fetchBanner()
    // this.fetchItems()
  },
  methods: {
    addCart ({ id }) {
      if (!isLogin()) {
        Toast.fail({
          message: '请登录',
          duration: 1000,
          onClose: () => {
            // 跳转到登录页
            this.$router.push({
              path: '/login',
              query: {
                from: '/home'
              }
            })
          }
        })
        return false
      }
      addCart({
        goodsId: id,
        number: 1,
        token: getToken()
      }).then((res) => {
        if (res.data.code === 0) {
          Toast.success('加入成功，请前往购买')
          this.$store.commit('cart/set_items', res.data.data.items)
        }
      })
    },
    enterList (id) {
      this.$router.push(`/itemList/${id}`)
    },
    enterDetail ({ id }) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    onLoad () {
      // 上拉触底
      this.fetchItems()
      this.page++
    },
    onRefresh () {
      this.page = 1
      this.items = []
      this.finished = false
      this.fetchItems()
    },
    fetchItems () {
      fetchItems({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        this.isLoading = false
        if (res.data.code === 700) {
          this.loading = false
          this.finished = true
        }
        if (res.data.code === 0) {
          this.loading = false
          this.items = [...this.items, ...res.data.data.result]
        }
      })
    },
    fetchBanner () {
      fetchHomeBanner().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    fetchCates () {
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    }
  },
  components: {
    commonTab,
    HomeHead,
    Flower
  }
}
</script>

<style lang="scss" scoped>
.warp2 {
  padding-bottom: 50px;
}
.my-swipe {
  margin-top: 50px;
  img {
    width: 100%;
  }
}
</style>
